<template>
    <div class="container">
        <div class="top">
            <img class="topImg" src="/src/assets/大屏image素材/标题/title_border_old.png">
            <h1>智慧城市</h1>
        </div>
        <div class="bottom">
            <img class="bottom-left" src="/src/assets/大屏image素材/标题/title-left.png">
            <img class="bottom-right" src="/src/assets/大屏image素材/标题/title-right.png">
        </div>
        <div class="line1"></div>
        <div class="line2"></div>
    </div>
</template>

<script setup>

</script>

<style scoped lang="scss">
.container {
    z-index: 1000;
    width: 100vw;
    position: absolute;

    .top {
        .topImg {
            width: 75%;
            text-align: center;
            height: 60px;
            position: fixed;
            top: 0%;
            left: 12%;
        }

        h1 {
            color: #fff;
            width: 200px;
            position: fixed;
            top: 10px;
            left: 45%;
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
            // font-family:'Courier New', Courier, monospace
            // font-family:'Times New Roman', Times, serif
        }
    }

    .bottom {
        position: fixed;
        bottom: 0;

        .bottom-left {
            width: 40vw;
            height: 50px;
            position: fixed;
            bottom: 10px;
            left: -10%;
        }

        .bottom-right {
            width: 40vw;
            height: 50px;
            position: fixed;
            bottom: 10px;
            right: -10%;
        }
    }

    .line1 {
        width: 40%;
        border: solid 3px rgba(28, 134, 191, 0.673);
        border-radius: 10px;
        position: fixed;
        bottom: 8%;
        left: 30%;
    }

    .line2 {
        width: 40%;
        border: solid 3px rgba(28, 134, 191, 0.673);
        border-radius: 10px;
        position: fixed;
        bottom: 1%;
        left: 30%;
    }
}
</style>
